<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的个人</el-breadcrumb-item>
    </el-breadcrumb>

      
     <!-- 个人资料区域 -->
      <el-card class="main-card">
        <el-row :gutter="10">
<!-- 头像、姓名、所属会员单位 -->
      <el-col >
<!-- 头像 -->
<el-col :span="6"> 
<el-card>
  <el-col :span="12"><el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit">
      </el-image>
      </el-col>
  <el-col :span="12">
<p>姓名</p>
<p>身份证号</p>
  </el-col>
 

</el-card>
<el-card>
  <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit">
      </el-image>
  比赛二维码</el-card>
<el-card>
  <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit">
      </el-image>
  考试二维码</el-card>
</el-col>
<el-col :span="18">
<el-card>
<el-form   label-width="100px">
<el-form-item label="角色">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="所在地">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="缴费时间">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="会员状态">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="赛事最好成绩">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="考试最好成绩">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="执照">
    <el-input ></el-input>
  </el-form-item>
</el-form>
</el-card>
</el-col>
      </el-col>
        </el-row>


      </el-card>
    </div>
</template>
<style lang="less" scoped>
.el-card{
  margin: 5px;
}
.el-input{
width: 300px;

}
.main-card{
  width: 100%;
  height: 100%;

}
.el-image{
  margin: 5px;
}
</style>
<script>
  export default {
    data() {
      return {
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
    }
  }
</script>